import './Finance.less';
import { observer } from 'mobx-react';
import { Table, Modal, Button, Radio, Input, } from 'antd';
import React, { useEffect, useState } from 'react';

const Finance = () => {
    //弹框
    const Tan = ({columns}) => {
        let [visible, setvisible] = useState(false)
        const showModal = () => {
            console.log(1,columns);
            setvisible(true)
        };
        const hideModalOK = () => {
            setInp('')
            setValue('通过')
            settongguo(false);
            setvisible(false)
            console.log(inp,value);
        };
        const hideModal = () => {
            setvisible(false)
            setInp('')
            setValue('通过')
            settongguo(false);
            setvisible(false)
        };
        const [inp, setInp] = useState('');
        const [value, setValue] = useState('');
        //单选
        const [tongguo, settongguo] = useState(false);
        const onChange = e => {
            setValue(e.target.value);
            if (e.target.value == '通过') {
                settongguo(false);
                setInp('')
            } else {
                settongguo(true);
            }
        };
        //输入框
        const { TextArea } = Input;
        const inpOnChange = (e) => {
            setInp(e.target.value)
        }
        

        const tiaozhuan=()=>{
            console.log(1,columns);
        }
        const [operat,setoperat]=useState()
        const [dianji,setdianji]=useState(false)
        const {state} = columns
        useEffect(()=>{
            switch (state) {
            case '已通过':
                setoperat('——')
                setdianji(true)
                break;
            case '已拒绝':
                setoperat('查看')
                setdianji(false)
                break;
            default:
                setoperat('提现')
                setdianji(false)
        }
        },[])
        return (
            <div>
                <Button type="link" disabled={dianji} onClick={()=>(state=='已拒绝'?tiaozhuan():showModal())}>{operat}</Button>
                <Modal
                    title="提现审核"
                    visible={visible}
                    onOk={hideModalOK}
                    onCancel={hideModal}
                    okText="确认"
                    cancelText="取消"
                >
                    <div>
                        <Radio.Group onChange={onChange} value={value}>
                            <Radio value={'通过'}>通过</Radio>
                            <Radio value={'拒绝'}>拒绝</Radio>
                        </Radio.Group>
                        <div className={tongguo? 'd-f' : 'd-f noShow'}>
                            <div>拒绝原因：</div>
                            <div><TextArea rows={4} onChange={inpOnChange} value={inp} placeholder='请输入拒绝原因'/></div>
                        </div>
                    </div>
                </Modal>
            </div>
        )
    }
    //表
    const columns = [
        {
            title: '时间',
            dataIndex: 'time',
            key: 'time',
        },
        {
            title: '店铺名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '金额',
            dataIndex: 'price',
            key: 'price',
        },
        {
            title: '状态',
            dataIndex: 'state',
            key: 'state',
        },
        {
            title: '操作',
            key: 'action',
            render: (v) => (
                    <Tan columns={v} />
            ),
        }
    ];

    const data = [
        {
            key: '1',
            time: '2019-06-26',
            name: 'John Brown',
            price: 32,
            state: '已通过'
        },
        {
            key: '2',
            time: '2019-06-26',
            name: 'John Brown',
            price: 32,
            state: '已拒绝'
        },
        {
            key: '3',
            time: '2019-06-26',
            name: 'John Brown',
            price: 32,
            state: '待审核'
        }
    ];
    return (
        <div className="big-card">
            <div className="card-header">
                <h2>财务管理</h2>
            </div>
            <div className="detail">
                <div>
                    提现审核
                </div>
                <Table columns={columns} dataSource={data} />
            </div>
        </div>
    );
}

export default observer(Finance);